//获取搜索按钮，为后续绑定事件做准备
var searchBtn = document.querySelector('main .box .search')
//获取输入框
var inputEle = document.querySelector('main .box input')
//当我们点击按钮，发送请求，将输入框的值传给服务器端，服务器端再返回搜索结果
searchBtn.onclick = () => {
    axios.get('/user/search', {
        params: {
            searchkey: inputEle.value
        }
    }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
}
//列表主体渲染部分
function render(data) {
    var str = ''
    str = data.map((item, index) => {
        return `
    <tr>
            <td>${item.mail}</td>
            <td>${item.name}</td>
            <td>${item.phone}</td>
            <td>${item.ingroup}</td>
            <td>${item.ismanager ? '是' : '否'}</td>
            <td><span class="statusok">${item.status ? '正常' : '异常'}</span></td>
            <td><span class='iconfont icon-xiugai'></span> <span class='iconfont icon-shanchu'></span></td>
          
        </tr>
    `
    }).join('')
    //表示未在服务器端查询到数据时，为了用户体验，会渲染出相应提示信息到页面
    if (str == '') {
        str = '<tr style="text-align:center;color:red">未查询到数据！</tr>'
    }
    document.querySelector('section main table tbody').innerHTML = str
}
//axios用来发ajax的一种方式，是从axios.min.js文件暴露的一个对象
axios.get('/user/list', { params: { page: 1, count: 3 } }).then((res) => {
    //调用渲染方法，接收后端返回的数据，渲染列表
    render(res.data.list)
})
axios.post('/user/login', { phone:'15899662746',password:'1234' } ).then((res)=>{
    console.log(res.data);
})
// --------------------------------------------------------------------------------------------------------
var page = 1
var pre = document.querySelector('.before')
var next = document.querySelector('.next')
//上一页
pre.onclick=()=>{
axios.get('/user/list',{params:{page:--page,count:3}}).then((res)=>{
    render(res.data.list)
})
next.disabled = false
if(page==1){
    pre.disabled = true  
}
}
//下一页
next.onclick = () => {
   
    axios.get('/user/list', { params: { page: ++page, count: 3 } }).then((res) => {
        render(res.data.list);
    })
    pre.disabled = false
    if (page == 3) {
        next.disabled = true
    }
}

